import React from 'react';
import { Route, Switch } from 'react-router-dom';
import { Home, List, Mine, Friend, Detail } from './index';
import { NavBar, Icon, TabBar } from 'antd-mobile';

export default class TabBarExample extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedTab: ''
    };
  }
  renderContent() {
    return (
      <div
        style={{
          backgroundColor: '#F5F5F5',
          height: document.documentElement.clientHeight - 50,
          overflow: 'auto',
          textAlign: 'center'
        }}
      >
        <Switch>
          <Route path="/" component={Home} exact />
          <Route path="/list" component={List} exact />
          <Route path="/list/:id" component={Detail} />
          <Route path="/mine" component={Mine} />
          <Route path="/friend" component={Friend} />
        </Switch>
      </div>
    );
  }
  render() {
    return (
      <div
        style={{
          position: 'fixed',
          height: '100%',
          width: '100%',
          bottom: 0
        }}
      >
        <TabBar
          unselectedTintColor="#949494"
          tintColor="#33A3F4"
          barTintColor="white"
          tabBarPosition="bottom"
        >
          <TabBar.Item
            title="首页"
            key="home"
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/sifuoDUQdAFKAVcFGROC.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/iSrlOTqrKddqbOmlvUfq.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selected={this.state.selectedTab === 'blueTab'}
            badge={1}
            onPress={() => {
              this.setState(
                {
                  selectedTab: 'blueTab'
                },
                () => {
                  this.props.history.push('/');
                }
              );
            }}
            data-seed="logId"
          >
            {this.renderContent()}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://gw.alipayobjects.com/zos/rmsportal/BTSsmHkPsQSPTktcXyTV.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://gw.alipayobjects.com/zos/rmsportal/ekLecvKBnRazVLXbWOnE.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            title="产品列表"
            key="list"
            badge={'new'}
            selected={this.state.selectedTab === 'redTab'}
            onPress={() => {
              this.setState(
                {
                  selectedTab: 'redTab'
                },
                () => {
                  this.props.history.push('/list');
                }
              );
            }}
          >
            {this.renderContent()}
          </TabBar.Item>
          <TabBar.Item
            icon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/psUFoAMjkCcjqtUCNPxB.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            selectedIcon={
              <div
                style={{
                  width: '22px',
                  height: '22px',
                  background:
                    'url(https://zos.alipayobjects.com/rmsportal/IIRLrXXrFAhXVdhMWgUI.svg) center center /  21px 21px no-repeat'
                }}
              />
            }
            title="通讯录"
            key="friend"
            dot
            selected={this.state.selectedTab === 'greenTab'}
            onPress={() => {
              this.setState(
                {
                  selectedTab: 'greenTab'
                },
                () => {
                  this.props.history.push('/friend');
                }
              );
            }}
          >
            {this.renderContent()}
          </TabBar.Item>
          <TabBar.Item
            icon={{
              uri:
                'https://zos.alipayobjects.com/rmsportal/asJMfBrNqpMMlVpeInPQ.svg'
            }}
            selectedIcon={{
              uri:
                'https://zos.alipayobjects.com/rmsportal/gjpzzcrPMkhfEqgbYvmN.svg'
            }}
            title="我的"
            key="mine"
            selected={this.state.selectedTab === 'yellowTab'}
            onPress={() => {
              this.setState(
                {
                  selectedTab: 'yellowTab'
                },
                () => {
                  this.props.history.push('/mine');
                }
              );
            }}
          >
            {this.renderContent()}
          </TabBar.Item>
        </TabBar>
      </div>
    );
  }
}
